<template>
  <div class="inspection-work">
    <el-card>
      <div class="top-search" v-has-permi="['inspection:work:query']">
        <el-form :model="queryParams" label-width="auto" :inline="true">
          <el-form-item label="模型名称">
            <el-input v-model="queryParams.modelName" placeholder="请输入" @keydown.enter="getList"> </el-input>
          </el-form-item>
          <el-form-item label="模型类型">
            <el-select v-model="queryParams.type" placeholder="请选择" @change="getList">
              <el-option label="网络" value="1" />
              <el-option label="服务器" value="2" />
            </el-select>
          </el-form-item>

          <el-form-item label="" >
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button plain @click="resertParams">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-top">
        <el-button type="primary" @click="handlerAdd" v-has-permi="['inspection:work:add']">增加</el-button>
        <el-button type="success" @click="handlerEdit" v-has-permi="['inspection:work:edit']">修改</el-button>
        <el-button type="danger" @click="handlerDel" v-has-permi="['inspection:work:delete']">删除</el-button>
      </div>
      <div class="table-content">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="modelName" label="模型名称" />
          <el-table-column property="typeName" label="模型类型"></el-table-column>
          <el-table-column property="createName" label="创建人"></el-table-column>

          <el-table-column property="createTime" label="创建时间"> </el-table-column>
          <el-table-column property="name" label="操作">
            <template #default="scope">
              <div>
                <el-button plain type="info" size="small" @click="toDetail(scope.row)" v-has-permi="['inspection:work:detail']">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>

      <!-- 模型 -->
      <el-dialog v-model="modelVisible" :title="modelTitle" width="800" :close-on-click-modal="false">
        <el-form ref="modelFormRef" style="max-width: 800px" :model="modelForm" label-width="auto" class="demo-ruleForm" status-icon>
          <el-form-item label="模型名称:" prop="modelName" :rules="[{required:true,message:'请输入模型名称', trigger: 'blur' }]">
            <el-input v-model="modelForm.modelName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="模型资产:" prop="assessList" :rules="[{required:true,message:'请选择模型资产', trigger: 'blur' }]">
            <el-select v-model="modelForm.assessList" multiple placeholder="请选择" style="width: 100%">
              <el-option v-for="item in PropertylList" :key="item.accessId" :label="item.accessName" :value="item.accessId" @click="modelSelece(item)" />
            </el-select>
          </el-form-item>
          <el-form-item label="模型类型:" prop="type" :rules="[{required:true,message:'请选择模型类型', trigger: 'blur' }]">
            <el-select v-model="modelForm.type" placeholder="请选择" style="width: 100%">
              <el-option label="网络" value="1" />
              <el-option label="服务器" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="modelVisible = false">关闭</el-button>
            <el-button type="primary" @click="modelEnter"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 详情 -->
      <el-drawer v-model="detailFlag" :title="detailTitle" direction="rtl" size="80%" :close-on-click-modal="false">
        <DetailDrawer ref="detailDrawerRef" :rowId="rowId" />
      </el-drawer>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
import { ElTable } from 'element-plus';
import DetailDrawer from './DetailDrawer.vue';
import {inspecWorkModelList ,inspecWorkPropertylList ,inspecWorkModelAdd,inspecWorkModelEdit,inspecWorkModelDel} from '@/api/inspection'

const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    modelName:"",
    type:""
  },
  tableData:[],
  modelVisible:false,
  modelTitle:"",
  modelForm:{modelName:"",assessList:"",type:""},
  rowId :"",
  detailFlag:false,
  detailTitle:"详情"
});
const { queryParams ,tableData,modelVisible ,modelTitle,modelForm ,rowId ,detailFlag,detailTitle} = toRefs(data);

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  console.log(val);

  multipleSelection.value = val;
};
/* 重置 */
const resertParams = async()=>{
queryParams.value = {
  pageNum: 1,
    pageSize: 10,
    modelName:"",
    type:""}

    await getList()
}

/* 详情 */
const toDetail = (row)=>{
  console.log(row);
  detailFlag.value = true
 rowId.value =  row.modelId
}
/* handlerAdd */
const handlerAdd= ()=>{
  modelVisible.value = true
  modelTitle.value = '添加'
  modelForm.value={modelName:"",assessList:"",type:""}

}
/* handlerEdit */
const handlerEdit = ()=>{
  modelTitle.value = '修改'
  if(multipleSelection.value&&multipleSelection.value.length!==1){
    ElMessage.error('请选择一条数据')
    return false
  }
  modelVisible.value = true

  let row:any= multipleSelection.value[0]
  rowId.value = row.modelId

  modelForm.value = {
    modelName:row.modelName,assessList:row.assessList,type:row.type
  }

}
/* handlerDel */
const handlerDel = ()=>{
  if(multipleSelection.value&&multipleSelection.value.length===0){
    ElMessage.error('请至少选择一条数据')
    return false
  }

  ElMessageBox.confirm(
    '确认要删除吗',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {

      const arr = multipleSelection.value.map((item:any)=>item.modelId)
      console.log(arr);

      const res = await inspecWorkModelDel(arr)
      console.log(res);
      if(res.code===200){
        ElMessage.success('删除成功')
      await  getList()
      }


    })
    .catch(() => {

    })

}

const modelFormRef = ref()
/* modelEnter */
const modelEnter = async()=>{
  console.log(modelForm.value);
  console.log(PropertylList.value);


  modelFormRef.value.validate(async(valid, fields)=>{
    if(valid){
      let filteredArray = PropertylList.value.filter(obj => modelForm.value.assessList.includes(obj.accessId));
  const res = modelTitle.value == '添加'?  await inspecWorkModelAdd({...modelForm.value ,assessList:filteredArray}) :await inspecWorkModelEdit({...modelForm.value,modelId:rowId.value ,assessList:filteredArray})

  console.log(res);
  if(res.code==200){
    ElMessage.success(modelTitle.value  + '成功')
    modelVisible.value = false
    await  getList()
  }else{
    ElMessage.error(res.msg)
  }

    }
  })




}


/* 资产选中 */
const modelSelece = (row)=>{
  // let arr = modelForm.value.assessList.filter(item=>item.id==rowId.id)
  // console.log(arr);

}

/* 资产列表 */
const PropertylList = ref<any>([])
const getPropertylList = async()=>{
  const res= await inspecWorkPropertylList({})
  console.log(res);
  PropertylList.value  = res.data

}

const getList = async() => {
  const res = await inspecWorkModelList({...queryParams.value})
  console.log(res);
  tableData.value= res.rows
  total.value = res.total

};
onMounted(()=>{
  getList()
  getPropertylList()
})
</script>

<style scoped lang="scss">
.inspection-work {
  padding: 8px;
  width: 100%;
  height: 100%;
  .el-card {
    width: 100%;
    height: 100%;
    .table-top {
      margin-bottom: 20px;
    }
    .table-content {
      width: 100%;
    }
  }
}
</style>
